import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "motion/react";
import { Button } from "./ui/button";
import { SessionManager } from "./SessionManager";

// 会话类型定义
export interface ChatSession {
  id: string;
  title: string;
  lastMessage: string;
  timestamp: Date;
  messageCount: number;
  agentName?: string;
}

interface SidebarProps {
  isOpen: boolean;
  onToggle: () => void;
  sessions: ChatSession[];
  currentSessionId?: string;
  onSessionSelect: (sessionId: string) => void;
  onNewSession: () => void;
  onDeleteSession: (sessionId: string) => void;
  onRenameSession?: (sessionId: string, newTitle: string) => void;
}

export function Sidebar({
  isOpen,
  onToggle,
  sessions,
  currentSessionId,
  onSessionSelect,
  onNewSession,
  onDeleteSession,
  onRenameSession,
}: SidebarProps) {
  const [isMobile, setIsMobile] = useState(false);

  // 检测是否为移动端
  useEffect(() => {
    const checkIsMobile = () => {
      setIsMobile(window.innerWidth < 768);
    };

    checkIsMobile();
    window.addEventListener('resize', checkIsMobile);

    return () => {
      window.removeEventListener('resize', checkIsMobile);
    };
  }, []);



  return (
    <>
      {/* 侧边栏切换按钮 */}
      <Button
        onClick={onToggle}
        variant="outline"
        className="fixed top-4 left-4 z-50 p-2 bg-gray-900/80 backdrop-blur-sm border border-gray-700 hover:bg-gray-800 hidden"
      >
        <svg
          className="w-5 h-5"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          {isOpen ? (
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          ) : (
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
          )}
        </svg>
      </Button>

      {/* 侧边栏遮罩 */}
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-40"
            onClick={onToggle}
          />
        )}
      </AnimatePresence>

      {/* 侧边栏内容 */}
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ x: isMobile ? -window.innerWidth : -320 }}
            animate={{ x: 0 }}
            exit={{ x: isMobile ? -window.innerWidth : -320 }}
            transition={{ type: "spring", damping: 25, stiffness: 200 }}
            className={`fixed left-0 top-0 h-full ${isMobile ? 'w-full' : 'w-80'
              } bg-white dark:bg-slate-900 backdrop-blur-sm border-r border-slate-200 dark:border-slate-700 z-50 flex flex-col`}
          >
            <SessionManager
              sessions={sessions}
              currentSessionId={currentSessionId}
              onSessionSelect={onSessionSelect}
              onNewSession={onNewSession}
              onDeleteSession={onDeleteSession}
              onRenameSession={onRenameSession}
            />
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}
